﻿@model FileBrowserModel

@{
	ViewBag.Title = "File Browser";
	Layout = null;
}

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	@(new jquerybasic() { SelectedSkin = jquerybasic.jQueryTheme.LightGreen, UseJqueryMigrate = true })

	<link href="~/Assets/Admin/Includes/uploadfile.css" rel="stylesheet" />
	<script src="~/Assets/Admin/Includes/jquery.form.min.js"></script>
	<script src="~/Assets/Admin/Includes/jquery.uploadfile.min.js"></script>

	<link href="~/Assets/iCheck/iCheck.css" rel="stylesheet" />
	<script src="~/Assets/iCheck/icheck.min.js"></script>
	<script src="~/Assets/Admin/Includes/icheck.init.js"></script>

	<link href="~/Assets/Admin/Includes/filebrowser.css" rel="stylesheet" />

	<script type="text/javascript">
		$(document).ready(function () {
			$("input:button, input:submit, input:reset, button").button();
		});
	</script>
	<script type="text/javascript">
		var selFile = '#txtSelectedFile';
		function SetFile(val) {
			var fldN = selFile;
			var fld = $(fldN);
			fld.val(val);
		}

		function cmsSetFileName() {
			var fldN = selFile;
			var fld = $(fldN);
			window.opener.cmsSetFileName(fld.val());
		}

		function cmsSetFileNameReturn() {
			var fldN = selFile;
			var fld = $(fldN);
			window.parent.cmsSetFileNameReturn(fld.val());

			return false;
		}
	</script>

	<script type="text/javascript">
		$(document).ready(function () {
			$("#fileuploader").uploadFile({
				url: "@Url.Action("AjaxFileUpload", RouteConfig.AdminCtrlr)",
				fileName: "@Html.IdFor(m => m.PostedFiles)",
				dragDrop: true,
				multiple: true,
				maxFileCount: -1,
				maxFileSize: 8 * 1024 * 1024,

				uploadButtonClass: "ajax-file-upload-none",
				uploadStr: "  ",
				dragDropStr: "<span>Drag files here to upload</span>",
				statusBarWidth: 400,
				dragdropWidth: 400,
				showPreview: true,
				previewHeight: "auto",
				previewWidth: "100px",

				dynamicFormData: function () {
					var data = {
						'@Html.NameFor(m => m.QueryPath)': "@Model.QueryPath.Replace(@"\", @"/")",
						'__RequestVerificationToken': $("[name='__RequestVerificationToken']").val(),
						'@Html.NameFor(m => m.EscapeSpaces)': $('#@Html.IdFor(m => m.EscapeSpaces)').prop("checked")
					};
					return data;
				},

				returnType: "json",
				showDone: true
			});
		});
	</script>

	@if (Model.UseTinyMCE) {
		<text>
			<script type="text/javascript" src="~/Assets/tiny_mce/tiny_mce.js"></script>
			<script type="text/javascript" src="~/Assets/tiny_mce/tiny_mce_popup.js"></script>

			<script type="text/javascript">

				var FileBrowserDialogue = {
					init: function () {
						if (tinyMCE.selectedInstance != null) {
							tinyMCE.selectedInstance.fileBrowserAlreadyOpen = true;
						}
						// Here goes your code for setting your custom things onLoad.
					},
					mySubmit: function () {

						var fldN = '#txtSelectedFile';
						var fld = $(fldN);
						var URL = fld.val();
						var win = tinyMCEPopup.getWindowArg("window");
						// insert information now
						if (win.document != null) {
							win.document.getElementById(tinyMCEPopup.getWindowArg("input")).value = URL;
						}
						// are we an image browser
						if (typeof (win.ImageDialog) != "undefined") {
							// we are, so update image dimensions and preview if necessary
							if (win.ImageDialog.getImageData) win.ImageDialog.getImageData();
							if (win.ImageDialog.showPreviewImage) win.ImageDialog.showPreviewImage(URL);
						}

						// close popup window
						tinyMCEPopup.close();
					}
				}

				tinyMCEPopup.onInit.add(FileBrowserDialogue.init, FileBrowserDialogue);

				myInitFunction = function () {

					// patch TinyMCEPopup.close
					tinyMCEPopup.close_original = tinyMCEPopup.close;
					tinyMCEPopup.close = function () {
						// remove blocking of opening another file browser window
						if (tinyMCE.selectedInstance != null) {
							tinyMCE.selectedInstance.fileBrowserAlreadyOpen = false;
						}

						// call original function to close the file browser window
						tinyMCEPopup.close_original();
					};
				}

				myExitFunction = function () {
					if (tinyMCE != null) {
						if (tinyMCE.selectedInstance != null) {
							tinyMCE.selectedInstance.fileBrowserAlreadyOpen = false;
						}
					}
				}

				window.onbeforeunload = myExitFunction;

				tinyMCEPopup.executeOnLoad('myInitFunction();');
			</script>
		</text>
	}

	<title>@ViewBag.Title</title>
</head>
<body>

	<div class="panel_wrapper">
		<div>
			<h2 class="head2">
				Files On Server
			</h2>
			@String.Format("Contents of:  {0} ", Model.QueryPath)
			<br />
			@if (Model.UpLinkVisible) {
				<a href="@Model.UpLink">
					<img src="~/Assets/Admin/images/back.png" border="0" alt="back" /><img src="~/Assets/Admin/images/folder.png" border="0" alt="folder" />
				</a>
			}
			<br />
		</div>

		<div class="scroll" id="folderZone">
			<table style="width: 98%" id="rpFolders">
				@foreach (var f in Model.Dirs) {
					<tr>
						<td style="width: 32px">
							<img src="~/Assets/Admin/images/folder.png" alt="folder" />
						</td>
						<td>
							<a id="lnkContent"
							   href='@String.Format("./FileBrowser?fldrpath={0}&useTiny={1}&returnvalue={2}&viewmode={3}", Server.UrlEncode(f.FolderPath), Model.UseTinyMCE, Model.ReturnMode, Model.ViewMode)'>
								@f.FileName
							</a>
						</td>
						<td>
							&nbsp;&nbsp;
						</td>
						<td style="width: 150px;">
							@f.FileDate
						</td>
					</tr>
				}
			</table>
		</div>

		@*@using (Html.BeginForm("FileBrowser", RouteConfig.AdminCtrlr, FormMethod.Post, new { enctype = "multipart/form-data" })) {
				@Html.AntiForgeryToken()
				<p>
					<br />
					Select a file to upload to the current folder:<br />
					@Html.TextBoxFor(m => m.PostedFile, new { type = "file" })

					@Html.HiddenFor(m => m.QueryPath)
					@Html.HiddenFor(m => m.ReturnMode)
					@Html.HiddenFor(m => m.UseTinyMCE)
					@Html.HiddenFor(m => m.ViewMode)

					<input type="submit" name="btnUpload" value="Upload" id="btnUpload" /><br />
					@Html.CheckBoxFor(m => m.EscapeSpaces)
					Change spaces to dashes
					<br />
					<span class="@Model.FileMsgCss" id="lblWarning">
						@Model.FileMsg
					</span>
				</p>
			}*@

		@using (Html.BeginForm("AjaxFileUpload", RouteConfig.AdminCtrlr, FormMethod.Post, new { enctype = "multipart/form-data" })) {
			@Html.AntiForgeryToken()
			<p>
				@Html.CheckBoxFor(m => m.EscapeSpaces)
				@Html.LabelFor(m => m.EscapeSpaces)
				<text> &nbsp;&nbsp;&nbsp;&nbsp; </text>
				@if (Model.Thumbnails) {
					<text>  [<a href="@Model.ThumbViewLink" id="lnkThumbView">Refresh</a>] <br /></text>
				} else {
					<text>  [<a href="@Model.FileViewLink" id="lnkFileview">Refresh</a>] <br /></text>
				}
				<div id="fileuploader">Upload</div>
				@Html.HiddenFor(m => m.QueryPath)
			</p>
		}

		@using (Html.BeginForm("FileBrowserRemove", RouteConfig.AdminCtrlr)) {
			@Html.AntiForgeryToken()

			@Html.HiddenFor(m => m.QueryPath)
			@Html.HiddenFor(m => m.ReturnMode)
			@Html.HiddenFor(m => m.UseTinyMCE)
			@Html.HiddenFor(m => m.ViewMode)

			<div class="scroll" id="fileZone">
				@if (Model.Thumbnails) {
					<div id="rpThumbs">
						@foreach (var f in Model.Files) {
							<div class="ui-widget-header ui-corner-all thumbCell" id="imgContainerGroup">
								<div id="imgContainer" onmouseout="hideImg(this)" onmouseover="showImg(this, 'thumb')">
									<div id="imgWrapper" style="display: none;">
										<img id="imgThmbnail" filetype="@Model.FileImageLink(f.MimeType)" alt="" src="@Model.CreateFileSrc(f.FolderPath, f.FileName, f.MimeType)" />
									</div>
									<div style="margin: 3px;" id="imgSubContainer">
										<a id="lnkContent" href='@Model.CreateFileLink(String.Format( "{0}{1}", f.FolderPath, f.FileName ))'>
											@CarrotWeb.ImageSizer(String.Format("{0}{1}", f.FolderPath, f.FileName), f.FileName, 50, true, null)
										</a>
									</div>
									<div style="margin: 3px; text-align: center;">
										@String.Format("{0}", f.FileName)  <br />
										@String.Format("{0:d}", f.FileDate)
									</div>
								</div>
							</div>
						}
					</div>
				} else {
					<div id="rpFiles">
						<table style="width: 98%;">
							<tr class="headerRow">
								<th style="width: 20px;">
								</th>
								<th style="width: 20px;">
								</th>
								<th class="headerRowText">
									Filename
								</th>
								<th style="width: 150px;" class="headerRowText">
									Date
								</th>
								<th>
								</th>
								<th style="width: 80px;" class="headerRowText">
									Size
								</th>
							</tr>

							@{
					int j = 0;
					foreach (var f in Model.Files) {
						<tr>
							<td>
								@Html.CheckBoxFor(m => Model.Files[j].SelectedItem)
								@Html.HiddenFor(m => Model.Files[j].FileName)
							</td>
							<td>
								<img src="@String.Format("/Assets/Admin/images/{0}.png", Model.FileImageLink(f.MimeType))" alt="filetype" />
							</td>
							<td>
								<div class="ImgGroup" id="imgContainerGroup">
									<div id="imgContainer" onmouseout="hideImg(this)" onmouseover="showImg(this, 'file')">
										<a id="lnkContent" href='@Model.CreateFileLink(String.Format( "{0}{1}", f.FolderPath, f.FileName ))'>
											@f.FileName
										</a>
									</div>
									<div id="imgWrapper" style="display: none;">
										<img id="imgThmbnail" filetype="@Model.FileImageLink(f.MimeType)" alt="" src="@Model.CreateFileSrc(f.FolderPath, f.FileName, f.MimeType)" />
									</div>
								</div>
							</td>
							<td>
								@String.Format("{0}", f.FileDate)
							</td>
							<td>
								&nbsp;
							</td>
							<td>
								@String.Format("{0}", f.FileSizeFriendly)
							</td>
						</tr>

						j++;
					}
							}
						</table>
					</div>
				}
			</div>
			<div>
				@if (!Model.Thumbnails) {
					<a href="@Model.ThumbViewLink" id="lnkThumbView">View Image Thumbnails</a>
				} else {
					<a href="@Model.FileViewLink" id="lnkFileview">View All Files</a>
				}
			</div>

			if (!Model.Thumbnails) {
				<p>
					<br />
					<input type="submit" name="btnRemove" value="Delete Checked" id="btnRemove" />
				</p>
			}
			<p>
				<br />
				Selected File:
				<input name="txtSelectedFile" type="text" size="50" id="txtSelectedFile" />

				@if (Model.ReturnMode) {
					<input type="button" name="btnReturnFile" value="Select File" onclick="return cmsSetFileNameReturn();" id="btnReturnFile" />
				} @*else {
						<input type="button" name="btnSelectedFile" value="Return Selection" onclick="FileBrowserDialogue.mySubmit();" id="btnSelectedFile" />
					}*@
			</p>

			if (!Model.UseTinyMCE) {
				<div style="display: none">
					<input type="button" id="Submit1" name="insert" value="Select" onclick="cmsSetFileName();return false;" />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="button" id="Button1" name="cancel" value="Cancel" onclick="window.close();" />
				</div>
			}
		}
	</div>

	@if (Model.UseTinyMCE) {
		<br class="clear" />
		<div class="mceActionPanel">
			<input type="button" id="insert" name="insert" value="Select" onclick="FileBrowserDialogue.mySubmit();return false;" />
			<input type="button" id="cancel" name="cancel" value="Cancel" onclick="tinyMCEPopup.close();" />
		</div>
	}

	<div id="imgWrapperMain" style="display: none;">
		<div style="padding: 5px; min-height: 10px; min-width: 10px;">
			<div id="imgPreviewCaption">
				0x0
			</div>
			<img alt="document" id="imgThmbnailPreview" src="~/Assets/Admin/images/document.png" class="thumbPreview" />
		</div>
	</div>
	<div style="display: block; margin-left: -9999px; float: left; max-height: 9000px; max-width: 9000px;">
		<img alt="document" id="imgRealPreview" src="~/Assets/Admin/images/document.png" />
	</div>

	<script type="text/javascript">
		var imgSrc = '/Assets/Admin/images/document.png';

		var imgPreviewId = 'imgWrapperMain';
		var imgRealId = 'imgRealPreview';
		var imgThumbId = 'imgThmbnailPreview';
		var imgSizeId = 'imgPreviewCaption';

		var divImgLayer = $('#' + imgPreviewId);
		var imgDim = $('#' + imgSizeId);
		var imgThumb = $('#' + imgThumbId);
		var imgReal = $('#' + imgRealId);

		function hideImg(obj) {
			var theNode = $(obj).parent();
			var grp = $(theNode).attr('id');

			$(divImgLayer).attr('style', 'display:none;');
			$(divImgLayer).attr('class', '');

			$(imgThumb).attr('src', imgSrc);
			$(imgThumb).attr('width', 64);
			$(imgThumb).attr('height', 64);
			$(imgThumb).removeAttr("width").attr("width");
			$(imgThumb).removeAttr("height").attr("height");

			$(imgReal).attr('src', imgSrc);

			$(imgDim).html('<br />');
		}

		function showImg(obj, mode) {
			var theNode = $(obj).parent();
			var imgSrc = $(theNode).find('img');
			var imgtype = $(imgSrc).attr('filetype');

			if (imgtype.indexOf('image') >= 0) {

				var val = $(imgSrc).attr('src');
				var grp = $('#fileZone').attr('id');
				var pos = $('#fileZone').offset();

				$(divImgLayer).attr('style', '');

				if (mode == 'file') {
					$(divImgLayer).css({ "left": (pos.left + 150) + "px", "top": (pos.top - 25) + "px" }).show();
				} else {
					$(divImgLayer).css({ "left": (pos.left + 20) + "px", "top": (pos.top - 200) + "px" }).show();
				}

				$(divImgLayer).attr('class', 'thumbpreview ui-corner-all');

				$(imgThumb).attr('alt', val);
				$(imgThumb).attr('title', val);
				$(imgThumb).attr('src', val);

				$(imgReal).attr('src', val);

				resizeImg();

				setTimeout("resizeImg();", 500);
				setTimeout("resizeImg();", 1500);
				setTimeout("resizeImg();", 5000);
			}
		}

		function resizeImg() {

			$(imgDim).html($(imgReal).width() + ' x ' + $(imgReal).height());

			if ($(imgThumb).height() > 175) {
				$(imgThumb).attr('height', 165);
				setTimeout("resizeImg();", 1500);
			}
		}
	</script>

	<p>
		<br class="clear" />
	</p>
</body>
</html>